<template>
        <div class="profile">
                <div class="container">
                        <div class="head"><p class="edit">编辑资料</p></div>
                        <div class="mainbox">
                                <div class="boxleft"><img src="../assets/imgs/logo.png" alt="">
                                       <div class="anliu"> <a-button  @click="showModal">修改头像</a-button></div></div>
                                <div class="boxright">
                                        <p>账户:</p>
                                        <p>角色:</p>
                                        <p>性别:</p>
                                        <p>电话:</p>
                                        <p>邮箱:</p>
                                        <p>部门:</p>
                                        <p>描述：</p>


                                </div>

                        </div>

                </div>
        <!-- 弹出框 -->
        
    <a-modal v-model:visible="visible" title="修改头像" @ok="handleOk" :bodyStyle="null">
         <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="Tab 1"></a-tab-pane>
    <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>
    </a-modal>
        </div>
</template>
    
<script setup lang='ts'>
    import {  } from '@ant-design/icons-vue';
    import { defineComponent, ref } from 'vue';
    const visible = ref<boolean>(false);
const activeKey=ref('1')
const showModal = () => {
  visible.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  visible.value = false;
};

 const obj = {
  "后田花子": [
    { url: "http://xawn.f3322.net:8002/distremote/static/avatar/default.jpg", imgName: "default.jpg" },
    { url: "http://xawn.f3322.net:8002/distremote/static/avatar/1d22f3e41d284f50b2c8fc32e0788698.jpeg", imgName: "1d22f3e41d284f50b2c8fc32e0788698.jpeg" },
    { url: "http://xawn.f3322.net:8002/distremote/static/avatar/2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg", imgName: "2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg" },
  ],
  "阿里系": [
    { url: "http://xawn.f3322.net:8002/distremote/static/avatar/cnrhVkzwxjPwAaCfPbdc.png", imgName: "avatar/cnrhVkzwxjPwAaCfPbdc.png" }
  ],
  "脸萌": [
    { url: "http://xawn.f3322.net:8002/distremote/static/avatar/19034103295190235.jpg", imgName: "19034103295190235.jpg" }
  ]
}





</script>
    
<style lang="scss" scoped>
    .profile{
        width: 100%;
        padding: 15px 15px;
        .container{
                width: 95%;
               
                margin: 0 auto;
                
                border: 1px solid #ccc;
                .head{  display: flex;
                        width: 100%;
                        height: 60px;
                        // background-color: pink;
                        align-items: center;
                        justify-content: end;
                        border-bottom: 1px solid #ccc;
                      .edit{
                        color: rgb(14, 19, 188);
                        cursor:pointer;
                        margin-right: 15px;
                      }
                }
                .mainbox{
                        width: 100%;
                        height: 300px;
                        // background-color: brown;
                        display: flex;
                        align-items: center;
                        .boxleft{
                                background-color: aqua;
                                width: 150px;
                                 height: 150px;
                                margin-left: 50px;
                                img{
                                        width: 150px;
                                        height: 150px;
                                }
                                .anliu{
                                        width: 100%;
                                        text-align: center;
                                        margin-top: 10px;
                                }

                        }
                        .boxright{
                                margin-left: 20px;
                        }
                }
        }
    }
  
</style>